<template>
  <div class="ele-body">
    <headPreviewStatuss></headPreviewStatuss>

    <siteSearch @search="reload"></siteSearch>
    <el-card :body-style="{ paddingTop: '8px' }">
      <ele-pro-table
        ref="tableRef"
        row-key="noticeId"
        :columns="columns"
        :datasource="datasource"
        highlight-current-row
        :bottom-line="false"
        cache-key="systemNoticeTable"
      >
        <template #toolbar v-if="hiddenCode">
          <el-button type="primary" @click="upLoadCode()" class="ele-btn-icon">
            活动二维码
          </el-button>
          <!-- <el-button type="danger"
                     class="ele-btn-icon"
                     icon="el-icon-delete">
            删除
          </el-button> -->
        </template>
        <template #siteStatus="{ row }">
          <el-tag
            :underline="false"
            :type="siteStatusType(row.siteStatus).type"
          >
            {{ siteStatusType(row.siteStatus).status }}
          </el-tag>
        </template>
        <!-- 用户信息 -->

        <template #userInformation="{ row }">
          <div class="realNameStyle">
            <img class="avaterName" :src="row.userAvatar" alt="" />
            <div>
              <div>{{ row.userName }}</div>
            </div>
          </div>
        </template>
        <template #payType="{ row }">
          <el-tag :type="enabledNotType(row.payType).type">
            {{ enabledNotType(row.payType).status }}
          </el-tag>
        </template>

        <template #action="{ row }">
          <el-link type="danger" :underline="false"> 活动码 </el-link>
          <el-popconfirm
            class="ele-action"
            title="是否确定要删除该条信息"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false"> 删除 </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
      <agent-code
        :visible.sync="activityShow"
        ref="code"
        :type="2"
        :releaseChannel="1"
      ></agent-code>
      <el-dialog title="活动二维码" :visible.sync="dialogVisible" width="20%">
        <div class="flex-column">
          <img class="imgCode" :src="qRCode" alt="" />
          <el-button @click="uploadActivityCode(qRCode)">下载二维码</el-button>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import AgentCode from '@/layout/components/agent-code';
  import scanCode from '@/views/matrixManage/releaseManage/videoId/code-img';
  import { userOssSignature } from '@/api/creatCenter/material';
  import { siteListArr } from './constant/constant';
  import headPreviewStatuss from './components/headPreviewStatuss.vue';
  import siteSearch from './components/siteSearch.vue';
  import {
    getActivitylist,
    generateDoupayQrCode
  } from '@/api/douPayActivityList/index';
  import drawerEdit from './components/drawerEdit.vue';
  import {
    addActivityconfig,
    updateActivityconfig,
    getActivityconfig
  } from '@/api/douPayActivityConfiguration/index.js';
  export default {
    name: 'siteList',
    components: {
      drawerEdit,
      siteSearch,
      headPreviewStatuss,
      scanCode,
      AgentCode
    },
    data() {
      return {
        siteListArr,
        // 当前编辑数据
        current: null,
        qRCode: null,
        codeName: '请使用抖音扫码',
        // 表格列配置
        columns: [
          {
            type: 'selection',
            columnKey: 'selection',
            width: 48,
            align: 'center',
            fixed: 'left'
          },
          {
            type: 'index',
            columnKey: 'index',
            width: 48,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'userInformation',
            label: '用户信息',
            width: 180,
            showOverflowTooltip: true,
            slot: 'userInformation'
          },
          {
            prop: 'payAmount',
            label: '付款金额(元)',

            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'payTime',
            label: '付款时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'returnCashAmount',
            label: '返现金额',

            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'orderNumber',
            label: '订单编号',

            align: 'center',
            showOverflowTooltip: true,
            slot: 'orderNumber'
          },
          {
            prop: 'orderCount',
            label: '订单量',

            align: 'center',
            showOverflowTooltip: true
          },
          // 支付类型1 微信 2 支付宝
          {
            prop: 'payType',
            label: '支付配置',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'payType'
          },
          {
            prop: 'exposureAmount',
            label: '曝光量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'upvoteAmount',
            label: '点赞量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'commentAmount',
            label: '评论量',
            align: 'center',
            showOverflowTooltip: true
          },
          // {
          //   prop: 'startDate',
          //   label: '创建时间',

          //   align: 'center',
          //   showOverflowTooltip: true,
          //   formatter: (_row, _column, cellValue) => {
          //     return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          //   }
          // },

          {
            prop: 'createDate',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
            }
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            slot: 'action',
            fixed: 'right'
          }
        ],
        // 表格选中数据
        selection: [],
        activityShow: false,
        // 抽屉是否显示
        drawerEditBoolen: false,
        //  活动id
        activityConfigId: '',
        dialogVisible: false,
        // 隐藏扫码
        hiddenCode: false
      };
    },

    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },

      // 状态
      siteStatusType() {
        return function (siteType) {
          if (siteType == '1') {
            return {
              status: '冻结',
              type: 'danger'
            };
          } else if (siteType == '2') {
            return {
              status: '未冻结',
              type: ' primary'
            };
          }
        };
      },

      enabledNotType() {
        return function (reflectionType) {
          if (reflectionType == '1') {
            return {
              status: '微信',
              type: 'success'
            };
          } else {
            return {
              status: '支付宝',
              type: ''
            };
          }
        };
      }
    },
    activated() {
      this.reload();
      this.init();
    },
    methods: {
      async init() {
        const msg = await getActivityconfig({
          merchantId: this.$store.state.user.info.merchantId,
          page: 1,
          limit: 10
        });

        if (msg) {
          //   是修改
          console.log(msg);
          if (msg.code == 2000) {
            if (msg?.data?.list.length) {
              const listObect = msg.data.list[0];
              console.log(listObect);

              this.activityConfigId = listObect.id;
              this.hiddenCode = true;
            } else {
              this.hiddenCode = false;
            }
          }
        }
      },
      uploadActivityCode(qRCode) {
        window.open(qRCode, '_self');
      },
      async upLoadCode() {
        const res = await generateDoupayQrCode({
          merchantId: this.$store.state.user.info.merchantId,
          activityConfigId: this.activityConfigId
        });
        console.log(res);
        this.seeCode(res.msg);
      },
      /* 活动二维码 */
      seeCode(qrcode) {
        this.activityShow = true;
        // 活动二维码  :row.qrcode
        this.$nextTick(() => {
          this.$refs['code'].show(qrcode);
        });
      },
      /* 活动二维码 */
      // seeCode (imgStr) {
      //   // 点击按钮预览图片

      //   console.log(imgStr);
      //   this.dialogVisible = true
      //   this.qRCode = imgStr

      // },
      // 点击查看详情弹出详情抽屉
      // async modify (row) {
      //   //   const res = await topUpRecords()
      //   if (row?.id || row?.id == 0) {
      //     const res = await siteDetail({ id: row.id });
      //     console.log(res[0]);
      //     this.current = res[0];
      //     // 用户余额管理
      //     this.drawerEditBoolen = !this.drawerEditBoolen;
      //   } else {
      //     this.drawerEditBoolen = !this.drawerEditBoolen;
      //     this.current = null;
      //   }
      // },

      // 冻结该条信息
      // async freeze (row) {
      //   console.log(row.id);
      //   const res = await siteModify({
      //     id: row.id,
      //     siteStatus: row.siteStatus == '1' ? '2' : '1'
      //   });
      //   console.log(res);
      //   this.reload();
      //   this.$message.success(res);
      // },
      // 重置密码为123456
      // async resettingPassword (row) {
      //   console.log(row.id);
      //   const res = await siteModify({
      //     id: row.id,
      //     password: '123456',
      //     account: row.account
      //   });
      //   console.log(res);
      //   this.reload();
      //   this.$message.success(res);
      // },
      /* 表格数据源 */
      datasource({ page, limit }) {
        return getActivitylist({
          page,
          limit,
          merchantId: this.$store.state.user.info.merchantId
        });
      },
      /* 刷新表格 */
      reload(where) {
        console.log(where);
        this.$refs.tableRef.reload({ page: 1, where: where });
      },

      /* 删除 */
      // remove (row) {
      //   const loading = this.$loading({ lock: true });
      //   siteDelete({
      //     id: row.id,
      //     account: row.account
      //   })
      //     .then((msg) => {
      //       console.log(msg);
      //       loading.close();
      //       this.$message.success(msg);
      //       this.reload();
      //     })
      //     .catch((e) => {
      //       loading.close();
      //       this.$message.error(e.message);
      //     });
      // },
      /* 批量删除 */
      removeBatch() {
        if (!this.selection.length) {
          this.$message.error('请至少选择一条数据');
          return;
        }
        this.$confirm('确定要删除选中的套餐吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading({ lock: true });
            removeMeal({ ids: this.selection.map((d) => d.id) })
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.reload();
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      }
    }
  };
</script>
<style lang="less" scoped>
  .imgCode {
    width: 100%;
    height: 300px;
  }
  .realNameStyle {
    display: flex;
    justify-content: start;
    align-items: center;
    .avaterName {
      width: 32px;
      height: 32px;
      border-radius: 32px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
</style>
